<template>
  <Row :gutter="15" class="table-detail">
    <Col :span="6" style="padding-left: 15px">总行数：{{ tableDetail.table_rows }}</Col>
    <Col :span="6">已使用：{{ friendlyVolume(tableDetail.used) }}</Col>
    <Col :span="6">剩余空间：{{ friendlyVolume(tableDetail.data_free) }}</Col>
    <Col :span="6">分配空间：{{ friendlyVolume(tableDetail.reserved) }}</Col>
  </Row>
  <Table size="small" bordered :scroll="{ y: tableHeight }" :pagination="false" :columns="columnNames" :data-source="columns" :rowClassName="GetTableRowClass" />
  <Button shape="round" type="primary" @click="copyFields" class="copyFields"><CopyOutlined /> 复制字段描述</Button>
</template>

<script setup>
  import { useStore } from 'vuex';
  import { ref, watch, inject, computed, nextTick, onMounted } from 'vue';
  import { Row, Col, Table, Button } from 'ant-design-vue';
  import { CopyOutlined } from '@ant-design/icons-vue';

  import { codeType, friendlyVolume } from '@/libs/helpers.js';

  const $store = useStore();
  const $http = inject('$http');
  const $message = inject('$message');
  const $copyText = inject('$copyText');

  const columns = ref([]);
  const props = defineProps({
    dbIndex: String,
    dbType: String,
    schema: String,
    tableName: String,
    tableDetail: Object
  });

  const tableHeight = computed(() => {
    return $store.state.area.content.height - 177;
  });

  const columnNames = [
    { title: '序号', width: 50, align: 'center', customRender: ({ index }) => index + 1 },
    { dataIndex: 'column_name', title: '字段名称', ellipsis: true },
    { dataIndex: 'column_comment', title: '字段说明', ellipsis: true },
    { dataIndex: 'column_type', title: '字段类型' },
    { title: '可空', width: 50, align: 'center', customRender: ({ record }) => (record.is_nullable == 'YES' || record.is_nullable == 1 ? '是' : '否') },
    { title: '主键', width: 50, align: 'center', customRender: ({ record }) => (record.column_key == 1 || record.column_key == 'PRI' ? '是' : '') },
    { dataIndex: 'column_default', title: '默认值', width: 80, ellipsis: true }
  ];

  watch(
    () => props.tableName,
    () => nextTick(() => GetColumns())
  );

  function GetColumns() {
    let dbIndex = props.dbIndex;
    let schema = props.schema;
    let tableName = props.tableName;

    if (dbIndex && schema && tableName) {
      $http.get(`/api/db/${dbIndex}/${schema}/${tableName}/columns`).then(res => (columns.value = res.datas));
    }
  }

  function GetTableRowClass(record, index) {
    return parseInt(index % 2) == 0 ? 'warning-row' : 'success-row';
  }

  function copyFields() {
    let datas = [];
    let rowIndex = 1;

    columns.value.forEach(c => {
      datas.push(`${rowIndex}\t${c.column_name}\t${codeType(c.column_type)}\t${c.is_nullable == 'YES' || c.is_nullable == 1 ? 'Y' : 'N'}\t${c.column_comment || ''}`);

      rowIndex++;
    });

    $copyText(datas.join('\r\n')).then(() => {
      $message.success('结果已复制！');
    });
  }

  onMounted(() => nextTick(() => GetColumns()));
</script>

<style lang="less" scoped>
  .ant-table-wrapper {
    margin-top: 0;
  }

  .copyFields {
    position: fixed;
    right: 18px;
    bottom: 10px;
  }

  .table-detail {
    margin: 0 !important;
    cursor: default;
    margin-left: -5px !important;
    line-height: 36px;
    border-radius: 5px 5px 0 0 !important;
    border: 1px solid #d6e9c6;
    color: #3c763d;
    background-color: #dff0d8;
    background-image: linear-gradient(to bottom, #dff0d8 0, #d0e9c6 100%);
  }
</style>
